<template>
  <l-content :width="contentWidth" :app="app">
    <el-card>
      <div>
        <el-form inline size="mini" style="width: 1100px;display: inline-block;vertical-align: text-top;"
                 :model="searchForm" label-width="100px"
                 onkeydown="if(event.keyCode===13){return false;}" @keyup.native.enter="onSearch">
          <div>
            <el-form-item label="日期条件">
              <el-select v-model="searchForm.dateType" class="w160">
                <el-option value="0" label="出票日期"/>
                <el-option value="1" label="起飞日期"/>
              </el-select>
            </el-form-item>
            <el-form-item :label="(searchForm.dateType === '1' ? '起飞':'出票') + '日始'">
              <el-date-picker
                value-format="yyyy-MM-dd"
                class="w160"
                v-model="searchForm.timeStart"
                type="date"
                :placeholder="(searchForm.dateType === '1' ? '起飞':'出票') + '日始'"/>
            </el-form-item>
            <el-form-item :label="(searchForm.dateType === '1' ? '起飞':'出票') + '日止'">
              <el-date-picker
                value-format="yyyy-MM-dd"
                class="w160"
                v-model="searchForm.timeEnd"
                type="date"
                :placeholder="(searchForm.dateType === '1' ? '起飞':'出票') + '日止'"/>
            </el-form-item>
            <el-form-item label="统计方式">
              <el-select v-model="searchForm.statisticalType" class="w160">
                <el-option value="0" label="按网店"/>
                <el-option value="1" label="按明细"/>
                <el-option value="2" label="按航司"/>
                <el-option value="3" label="按航线"/>
                <el-option value="4" label="按航司航线"/>
                <el-option value="5" label="按出票员"/>
              </el-select>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="航空公司">
              <el-select v-model="searchForm.airline" class="w160" clearable filterable>
                <el-option v-for="item in options.airLine" :label="item.value" :value="item.key" :key="item.key"/>
              </el-select>
            </el-form-item>
            <el-form-item label="航程">
              <el-input v-model="searchForm.dCity" class="w70"/>
              <span style="display: inline-block;width: 12px;text-align: center;">-</span>
              <el-input v-model="searchForm.aCity" class="w70"/>
            </el-form-item>
            <el-form-item label="舱位">
              <el-input v-model="searchForm.clazz" class="w160"/>
            </el-form-item>
            <el-form-item label="航班号">
              <el-input v-model="searchForm.flight" class="w160"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="网店">
              <el-input v-model="searchForm.shopCode" class="w160"/>
            </el-form-item>
            <el-form-item label="PNR">
              <el-input v-model="searchForm.recordNo" class="w160"/>
            </el-form-item>
            <el-form-item label="外部单号">
              <el-input v-model="searchForm.issueBillId" class="w160"/>
            </el-form-item>
            <el-form-item label="出票员">
              <el-input v-model="searchForm.issueUser" class="w160"/>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="出票渠道">
              <el-select v-model="searchForm.issueChannel" class="w160" clearable filterable>
                <el-option v-for="item in options.issueChannel" :label="item.value" :value="item.key" :key="item.key"/>
              </el-select>
            </el-form-item>
            <el-form-item label="政策代码">
              <el-input v-model="searchForm.policyCode" class="w160"/>
            </el-form-item>
            <el-form-item label="票号">
              <el-input v-model="searchForm.ticketNo" class="w160"/>
            </el-form-item>
            <el-form-item label="订单状态">
              <el-select v-model="searchForm.passengerStatus" class="w160" clearable filterable>
                <el-option v-for="item in options.passengerStatus" :label="item.cname" :value="item.key"
                           :key="item.key"/>
              </el-select>
            </el-form-item>
          </div>
        </el-form>
        <span style="width: 120px;display: inline-block;vertical-align: text-top;">
          <a :href="downloadUrl" ref="download" download style="display: none"></a>
          <div class="space-m-b"><el-button type="primary" size="small" class="w100"
                                            @click="onSearch">查询</el-button></div>
          <div class="space-m-b"><el-button type="warning" size="small" class="w100"
                                            @click="onExport">导出</el-button></div>
        </span>
      </div>

      <!-- 按销售明细查询 -->
      <div v-if="this.query.statisticalType === '1'">
        <c-page-table
          show-summary
          :summary-method="tableDataSummary"
          stripe
          :data="tableData"
          @select-page="onSelectPage"
          @sort-change="onSortChange"
          :loading="loading">
          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="shopName"
            label="网店"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="passengerStatusStr"
            label="票证状态"
            min-width="70">
          </el-table-column>
          <el-table-column
            label="出票时间"
            min-width="130">
            <template slot-scope="scope">
              {{scope.row.issueTime | datetimeShortFormat1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="issueChannel"
            label="票证类型"
            min-width="70">
          </el-table-column>
          <el-table-column
            prop="recordNo"
            label="PNR"
            min-width="75">
          </el-table-column>
          <el-table-column
            prop="airlineRecordNo"
            label="大编码"
            min-width="75">
          </el-table-column>
          <el-table-column
            prop="ownerAirline"
            label="承运人"
            min-width="60">
          </el-table-column>
          <el-table-column
            prop="ticketNo"
            label="票号"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="passengerName"
            label="乘机人"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="cardNo"
            label="证件号码"
            min-width="155">
          </el-table-column>
          <el-table-column
            prop="airRange"
            label="航程"
            min-width="80">
          </el-table-column>
          <!--el-table-column
            prop="airRangeName"
            label="航程名称"
            min-width="100">
          </el-table-column-->
          <el-table-column
            prop="flight"
            label="航班号"
            min-width="65">
          </el-table-column>
          <el-table-column
            prop="clazz"
            label="舱位"
            min-width="45">
          </el-table-column>
          <el-table-column
            label="起飞时间"
            min-width="130">
            <template slot-scope="scope">
              {{scope.row.takeOffTime | datetimeShortFormat1}}
            </template>
          </el-table-column>
          <el-table-column
            prop="issueOffice"
            label="OFFICE"
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="issueUserName"
            label="出票员"
            min-width="60">
          </el-table-column>
          <el-table-column
            label="采购">
            <el-table-column
              prop="purchasePrintPrice"
              label="票面价"
              min-width="60">
              <template slot-scope="scope">
                {{scope.row.purchasePrintPrice | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="purchasePrice"
              label="采购小计"
              min-width="80">
              <template slot-scope="scope">
                {{scope.row.purchasePrice | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="payWay"
              label="采购账户"
              min-width="65">
            </el-table-column>
            <el-table-column
              prop="payNo"
              label="支付流水号"
              min-width="110">
            </el-table-column>
          </el-table-column>
          <el-table-column label="销售">
            <el-table-column
              prop="printPrice"
              label="票面价"
              min-width="65">
              <template slot-scope="scope">
                {{scope.row.printPrice | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="transferProfit"
              label="加价/让利"
              min-width="65">
              <template slot-scope="scope">
                {{scope.row.transferProfit | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="salePrice"
              label="销售价"
              min-width="65">
              <template slot-scope="scope">
                {{scope.row.salePrice | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="tax"
              label="机建"
              min-width="65">
              <template slot-scope="scope">
                {{scope.row.tax | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="oilFee"
              label="燃油"
              min-width="65">
              <template slot-scope="scope">
                {{scope.row.oilFee | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalSales"
              label="小计"
              min-width="65">
              <template slot-scope="scope">
                {{scope.row.totalSales | money}}
              </template>
            </el-table-column>
            <!--<el-table-column-->
            <!--prop="amountReceivable"-->
            <!--label="应收金额"-->
            <!--width="100">-->
            <!--</el-table-column>-->
          </el-table-column>
          <el-table-column
            prop="profit"
            label="利润"
            min-width="65">
            <template slot-scope="scope">
              {{scope.row.profit | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="issueBillId"
            label="外部单号"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="policyCode"
            label="政策代码"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="policyTypeStr"
            label="政策类型"
            width="70">
          </el-table-column>
        </c-page-table>
      </div>

      <!-- 按其他方式查询 -->
      <div v-else>
        <el-table
          show-summary
          :summary-method="tableListSummary"
          class="el-easy-ui-table"
          stripe
          :data="tableList"
          :loading="loading">
          <el-table-column
            label="序号"
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            v-if="query.statisticalType === '0'"
            prop="shopName"
            label="网店"
            min-width="100">
          </el-table-column>
          <el-table-column
            v-if="query.statisticalType === '2' || query.statisticalType === '4'"
            prop="airline"
            label="航司"
            min-width="100">
          </el-table-column>
          <el-table-column
            v-if="query.statisticalType === '3' || query.statisticalType === '4'"
            prop="airRange"
            label="航线"
            min-width="100">
          </el-table-column>
          <!--el-table-column
            v-if="query.statisticalType === '3' || query.statisticalType === '4'"
            prop="airRangeName"
            label="航线名称"
            min-width="100">
          </el-table-column-->
          <el-table-column
            v-if="query.statisticalType === '5'"
            prop="issueUserName"
            label="出票员"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="ticketNum"
            label="张数"
            min-width="100">
          </el-table-column>
          <el-table-column
            prop="purchasePrice"
            label="采购价"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.purchasePrice | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="salePrice"
            label="销售价"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.salePrice | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="tax"
            label="机建"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.tax | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="oilFee"
            label="燃油"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.oilFee | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="account"
            label="小计"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.account | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="amountPaid"
            label="已付金额"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.amountPaid | money}}
            </template>
          </el-table-column>
          <el-table-column
            prop="profit"
            label="利润"
            min-width="100">
            <template slot-scope="scope">
              {{scope.row.profit | money}}
            </template>
          </el-table-column>
          <el-table-column
            label="退票">
            <el-table-column
              prop="returnTicketNum"
              label="张数"
              min-width="100">
            </el-table-column>
            <el-table-column
              prop="returnTicketFee"
              label="退票费"
              min-width="100">
              <template slot-scope="scope">
                {{scope.row.returnTicketFee | money}}
              </template>
            </el-table-column>
            <el-table-column
              prop="returnTicketPaid"
              label="实退金额"
              min-width="100">
              <template slot-scope="scope">
                {{scope.row.returnTicketPaid | money}}
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </l-content>
</template>

<script>

import Dict from '@/constants/Dict'

export default {
  name: 'SalesReportPage',
  props: {
    app: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    const now = new Date()
    const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1)
    const yesterdayStr = yesterday.format('yyyy-MM-dd')
    const searchForm = {
      dateType: '0',
      timeStart: yesterdayStr,
      timeEnd: yesterdayStr,
      statisticalType: '0',
      airline: '',
      dCity: '',
      aCity: '',
      clazz: '',
      flight: '',
      shopCode: '',
      recordNo: '',
      issueBillId: '',
      issueUser: '',
      issueChannel: '',
      policyCode: '',
      ticketNo: '',
      passengerStatus: ''
    }
    const query = Object.assign({
      page: 1,
      pageSize: 50
    }, searchForm)

    return {
      loading: false,
      options: {
        passengerStatus: Dict.Options.passengerStatus,
        airLine: [],
        issueChannel: []
      },
      searchForm: searchForm,
      query: query,
      tableData: {
        /* 表格数据固定写法 */
        records: 0,
        page: 1,
        rows: []
      },
      tableList: [],
      statusCount: {
        waitNum: 0,
        outNum: 0,
        alreadyNum: 0,
        thawFailureNum: 0
      }
    }
  },
  computed: {
    contentWidth () {
      if (this.query.statisticalType === '1') {
        return '2800px'
      } else {
        return '1500px'
      }
    },
    downloadUrl () {
      return this.$service.report.exportSalesReport(this.query)
    }
  },
  created () {
    this.onSearch()
    this.loadOptions()
  },
  methods: {
    tableDataSummary (param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        if (index < 18 ||
          (index > 19 && index < 22) ||
          (index > 28)
        ) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property] || 0))
        const sum = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
        sums[index] = this.$options.filters.money(sum)
      })
      return sums
    },
    tableListSummary (param) {
      const offsetMap = {
        '0': 2,
        '2': 2,
        '3': 2,
        '4': 3,
        '5': 2
      }

      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总计'
          return
        }
        if (index < offsetMap[this.query.statisticalType]) {
          sums[index] = ''
          return
        }
        const values = data.map(item => Number(item[column.property] || 0))
        const sum = values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)
        if ((index === offsetMap[this.query.statisticalType] + 8) || (index === offsetMap[this.query.statisticalType])) {
          // 张数
          sums[index] = this.$options.filters.money(sum, 0)
        } else {
          sums[index] = this.$options.filters.money(sum)
        }
      })
      return sums
    },
    onSearch () {
      // 把searchForm里面的值覆盖到query里面去
      Object.assign(this.query, this.searchForm)
      this.query.page = 1
      this.refreshPage()
    },
    onExport () {
      // 把searchForm里面的值覆盖到query里面去
      Object.assign(this.query, this.searchForm)
      // 模拟点击a标签下载
      this.$refs['download'].click()
    },
    onSelectPage (page, size) {
      this.query.page = page
      this.query.pageSize = size
      this.refreshPage()
    },
    onSortChange ({sidx, sord}) {
      // 排序设置
      this.query.sidx = sidx
      this.query.sord = sord
      this.refreshPage()
    },
    refreshPage (loading = true) {
      this.loading = loading
      if (this.query.statisticalType === '1') {
        this.$service.report.querySalesReportPage(this.query).then(res => {
          this.tableData = res.data
        }).finally(() => {
          this.loading = false
        })
      } else {
        this.$service.report.querySalesReportList(this.query).then(res => {
          this.tableList = res.data
        }).finally(() => {
          this.loading = false
        })
      }
    },
    loadOptions () {
      this.$service.options.getAirLineOption().then(res => {
        this.options.airLine = res.data
      })

      this.$service.options.getIssueChannel().then(res => {
        this.options.issueChannel = res.data
      })
    }
  }
}
</script>

<style></style>
